<template>
	<view class="container">
		<!-- 用户信息 -->
		<view class="user">
			<view class="user-top">
				<view class="user-top-left">
					<image :src="userInfo.avatar_url ? userInfo.avatar_url : '/static/image/avatar/5.jpg'"></image>
					<view class="user-info" v-if="userInfo.id" @click="toSetting()">
						<text class="nickname">{{ userInfo.nickname }}</text>
						<text class="phone">{{ userInfo.phone }}</text>
					</view>
          <view class="user-info" v-else @click="goLogin()">
            <text class="nickname">去登录</text>
          </view>
				</view>
				<view class="user-top-right" v-if="userInfo.id">
					<image @click="toSetting()" src="/static/icon/setting.png"></image>
				</view>
			</view>
			<view class="user-bottom">
				<view class="user-bottom-item" @click="goBalance()">
					<text class="user-bottom-num">{{ userInfo.balance || 0 }}</text>
					<text class="user-bottom-txt">余额(元)</text>
				</view>
				<view class="user-bottom-item" @click="goCoupon()">
					<text class="user-bottom-num">{{ couponLength || 0 }}</text>
					<text class="user-bottom-txt">优惠券</text>
				</view>
<!--				<view class="user-bottom-item">-->
<!--					<text class="user-bottom-num">5</text>-->
<!--					<text class="user-bottom-txt">电子券</text>-->
<!--				</view>-->
<!--				<view class="user-bottom-item" @click="goScore()">-->
<!--					<text class="user-bottom-num">999</text>-->
<!--					<text class="user-bottom-txt">积分</text>-->
<!--				</view>-->
			</view>

		</view>
		<view class="content">
			<!-- 订单 -->
			<view class="order">
				<view class="order-top">
					<text class="order-top-txt">我的订单</text>
					<view class="order-top-all" @click="toOrder()">
						<text>全部订单</text>
						<image src="/static/icon/right.png"></image>
					</view>
				</view>
				<view class="order-bottom" @click="toOrder()">
					<view class="order-bottom-item">
						<image src="/static/icon/order/daifukuan.png"></image>
						<text>待付款</text>
					</view>
					<view class="order-bottom-item">
						<image src="/static/icon/order/daifahuo.png"></image>
						<text>待核销</text>
					</view>
<!--					<view class="order-bottom-item">-->
<!--						<image src="/static/icon/order/daishouhuo.png"></image>-->
<!--						<text>待收货</text>-->
<!--					</view>-->
					<view class="order-bottom-item">
						<image src="/static/icon/order/daipingjia.png"></image>
						<text>待评价</text>
					</view>
					<view class="order-bottom-item">
						<image src="/static/icon/order/shouhou.png"></image>
						<text>退款/售后</text>
					</view>
				</view>
			</view>

			<!-- 我的服务 -->
      <view class="service">
        <view class="service-top">
          <text class="service-top-txt">我的服务</text>
        </view>
        <view class="service-bottom">
          <!--					<view class="service-bottom-item" @click="toFootprint()">-->
          <!--						<image src="/static/icon/service/footprint.png"></image>-->
          <!--						<text>浏览记录</text>-->
          <!--					</view>-->
          <view class="service-bottom-item" @click="toTixian">
            <image src="/static/icon/service/balance.png"></image>
            <text>提现</text>
          </view>
          <view class="service-bottom-item" @click="toCode()">
            <image src="/static/icon/service/collect.png"></image>
            <text>我的推广</text>
          </view>
          <view class="service-bottom-item" @click="goCoupon()">
            <image src="/static/icon/service/service.png"></image>
            <text>我的优惠券</text>
          </view>
          <view class="service-bottom-item" >
            <button class="contact" type="default" open-type="contact"></button>
            <image src="/static/icon/service/kefu.png"></image>
            <text>在线客服</text>
          </view>
        </view>
      </view>
      <view class="service">
        <view class="service-top">
          <text class="service-top-txt">商家</text>
        </view>
        <view class="service-bottom">
          <view class="service-bottom-item" @click="toCheckCode()">
            <image src="/static/icon/order/daifahuo.png"></image>
            <text>核销</text>
          </view>
        </view>
      </view>
		</view>
	</view>
</template>

<script>
  import { mapGetters } from 'vuex'
	export default {
		data() {
			return {
				list: [
				],
        couponLength: 0
			};
		},
    computed: {
      ...mapGetters(['userInfo'])
    },
    onShow() {
      this.$store.dispatch('getUserInfo')
      // this.$api.getProductList({
      //   is_recommend: 1,
      //   pageSize: 20
      // }).then(res => {
      //   this.list = res.rows
      // })
      this.fetchCoupons()
    },
		methods: {
      toCheckCode() {
        if (!this.userInfo.id) {
          uni.showToast({
            title: '请先登录',
            icon: 'none'
          })
          return
        }
        uni.navigateTo({
          url: '/pages/mine/checkCode'
        })
      },
      async fetchCoupons() {
        const res = await this.$api.getCouponList({
          user_id: this.userInfo.id,
          status: 0
        })
        this.couponLength = (res || []).length
      },
			checkLogin() {
				if (!this.userInfo.id) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
				}
			},
			// 跳转我的订单页面
			toOrder() {
				uni.navigateTo({
					url: '/pages/order/order'
				})
			},
      toCode() {
        if (!this.userInfo.id) {
          uni.showToast({
            title: '请先登录',
            icon: 'none'
          })
          return
        }
        uni.navigateTo({
          url: '/pages/mine/code'
        })
      },
      toTixian() {
        if (!this.userInfo.id) {
          uni.showToast({
            title: '请先登录',
            icon: 'none'
          })
          return
        }
        // 提现
        uni.navigateTo({
          url: '/pages/mine/tixian'
        })
      },
			// 跳转设置页面
			toSetting() {
        if (!this.userInfo.id) return
				uni.navigateTo({
					url: '/pages/setting/setting'
				})
			},
			// 跳转地址页面
			toAddress() {
				uni.navigateTo({
					url: '/pages/address/address'
				})
			},
			// 跳转足迹页面
			toFootprint() {
				uni.navigateTo({
					url: '/pages/mine/footprint'
				})
			},
			// 跳转收藏页面
			toCollect() {
				uni.navigateTo({
					url: '/pages/mine/collect'
				})
			},
			// 跳转登录页面
			goLogin() {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			},
			// 跳转余额明细页面
			goBalance() {
				this.checkLogin()
				uni.navigateTo({
					url: '/pages/mine/balance'
				})
			},
			goCoupon(){
				this.checkLogin()
        uni.navigateTo({
          url: '/pages/coupon/coupon?source=source'
        })
			},
			// 跳转积分明细页面
			goScore() {
				uni.navigateTo({
					url: '/pages/mine/score'
				})
			}
		}
	}
</script>

<style>
	page {
		background: #F8F9FA;
	}
</style>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;
	}

	.user {
		border-bottom-left-radius: 60% 15%;
		border-bottom-right-radius: 60% 15%;
		background: #4e8ef7;
		opacity: 1;
	}

	.user-top {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;

		.user-top-left {
			display: flex;
			align-items: center;

			image {
				width: 110rpx;
				height: 110rpx;
				border-radius: 50%;
			}

			.user-info {
				display: flex;
				flex-direction: column;
				margin-left: 30rpx;

				.nickname {
					font-size: 32rpx;
					color: #FFFFFF;
				}

				.phone {
					font-size: 24rpx;
					color: #FFFFFF;
					margin-top: 6rpx;
					opacity: 0.8;
				}
			}
		}

		.user-top-right {
      display: flex;
      align-items: center;
			image {
				width: 48rpx;
				height: 48rpx;
			}

			.kefu-icon {
				margin-left: 20rpx;
			}
		}
	}

	.user-bottom {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding-bottom: 160rpx;

		.user-bottom-item {
			display: flex;
			flex-direction: column;
			text-align: center;

			.user-bottom-num {
				font-size: 36rpx;
				color: #FFFFFF;
			}

			.user-bottom-txt {
				font-size: 24rpx;
				color: #FFFFFF;
				opacity: 0.8;
			}

		}
	}

	.order {
		border-radius: 20rpx;
		background: #FFFFFF;
		margin-top: -160rpx;

		.order-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;

			.order-top-txt {
				font-size: 28rpx;
				font-weight: 600;
				color: #333333;
			}

			.order-top-all {
				display: flex;
				align-items: center;

				text {
					font-size: 24rpx;
					color: #666666;
				}

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}

		.order-bottom {
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding-top: 20rpx;
			padding-bottom: 30rpx;

			.order-bottom-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 52rpx;
					height: 52rpx;
				}

				text {
					font-size: 22rpx;
					color: #666666;
					margin-top: 20rpx;
				}
			}
		}
	}

	.service {
		bservice-radius: 20rpx;
		background: #FFFFFF;
		margin-top: 20rpx;

		.service-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 30rpx 20rpx 30rpx;

			.service-top-txt {
				font-size: 28rpx;
				font-weight: 600;
				color: #333333;
			}

			.service-top-all {
				display: flex;
				align-items: center;

				text {
					font-size: 24rpx;
					color: #666666;
				}

				image {
					width: 70rpx;
					height: 70rpx;
				}
			}
		}

		.service-bottom {
			display: flex;
			align-items: center;
			padding-top: 20rpx;
			padding-bottom: 30rpx;

			.service-bottom-item {
        width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
        position: relative;

        .contact{
          position: absolute;
          width: 100%;
          height: 120rpx;
          top:0;
          left:0;
          opacity: 0;
        }
				image {
					width: 70rpx;
					height: 70rpx;
				}

				text {
					font-size: 22rpx;
					color: #666666;
					margin-top: 20rpx;
				}
			}
		}
	}

	.recommend {
		margin-top: 50rpx;

		.recommend-title {
			display: flex;
			align-items: center;
			justify-content: center;

			text {
				font-size: 30rpx;
				font-weight: 600;
				color: #333333;
			}

			image {
				width: 40rpx;
				height: 22rpx;
			}

			.recommend-title-l {
				margin-right: 30rpx;
			}

			.recommend-title-r {
				margin-left: 30rpx;
			}
		}

		.recommend-goods {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.goods {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				border-radius: 20rpx;
				background: #FFFFFF;
				padding: 0rpx 30rpx 30rpx 30rpx;
				margin-top: 30rpx;
			}

			.goods-image {
				width: 280rpx;
				height: 280rpx;
				border-radius: 4px;
			}

			.goods-name {
				width: 274rpx;
				font-size: 26rpx;
				font-weight: 700;
				line-height: 34rpx;
				color: #333333;
				margin-top: 10rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.goods-tag {
				display: flex;
				align-items: center;
				margin-top: 14rpx;
				font-size: 18rpx;

				text:nth-child(1) {
					color: #F55726;
					border: 1px solid #F55726;
					border-radius: 4rpx;
					padding: 0rpx 4rpx;
				}

				text:nth-child(2) {
					color: #f56c6c;
					border: 1px solid #f56c6c;
					border-radius: 4rpx;
					margin-left: 10rpx;
					padding: 0rpx 4rpx;
				}
			}

			.goods-price {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 14rpx;

				.goods-price-txt {
					color: #F55726;
					font-size: 32rpx;
					font-weight: 600;

					.goods-price-unit {
						font-size: 22rpx;
						color: #999999;
						font-weight: normal;
					}
				}

				.goods-shopcar-icon {
					width: 44rpx;
					height: 44rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
</style>
